{% extends "base.html" %} {% block html_title %} 游戏列表 {% endblock html_title %} {% block page_title %} 游戏列表

{% endblock page_title %} {% block content %}
<div id="content">
    <el-row>
        <input type="text" placeholder='输入玩家昵称' style='padding:7px;border-radius: 5px;border:none'> {#
        <input type="text" placeholder='输入玩家昵称' style='padding:7px;border-radius: 5px;border:none'>#}
        <button type='submit' style='padding:7px 20px;outline:none;border:none;margin-left:10px;border-radius:5px;background:#3c8dbc;color:white'>搜索</button>
        {% if current_user.is_admin %}
        <button @click='clearAllDataFormVisible = true' style='float:right;font-size:15px;background:#fe5656;color:white;border-radius:5px;padding:7px;border:none;outline:none'>清除所有数据</button>
        {% endif %}
    </el-row>
    <el-row>
        <el-table :data="gamesets" @sort-change="onSortChanged" @row-click="onTableRowClick">
            <el-table-column prop="sn" label="期号">
            </el-table-column>
{#            <el-table-column prop="playerCount" label="" sortable>#}
{#            </el-table-column>#}
{#            <el-table-column prop="envelopeCount" label="" sortable>#}
{#            </el-table-column>#}
{#            <el-table-column prop="envelopeAmount" label="发包金额" sortable>#}
{#            </el-table-column>#}
{#            <el-table-column prop="wagerAmount" label="" sortable>#}
{#            </el-table-column>#}
{#            <el-table-column prop="deduction" label="" sortable>#}
{#            </el-table-column>#}
{#            <el-table-column prop="banker" label="" sortable>#}
{#            </el-table-column>#}
        </el-table>
    </el-row>
    <el-row>
        <el-pagination background layout="prev, pager, next" :total="gamesetCount" page-size=30 :current-page.sync="currentPage" @current-change="onCurrentPageChanged">
        </el-pagination>
    </el-row>

    {% if current_user.is_admin %}
    <el-dialog :visible.sync="clearAllDataFormVisible" title="清除所有数据">
        <el-row>
            <ul>
                <li>此操作会删除<b>所有</b>游戏以及玩家数据，包括<b>上下分、余分</b>等信息</li>
                <li>为了保证数据正确，请确认<b>客户端程序关闭之后</b>再进行本次清除数据操作</li>
            </ul>
        </el-row>
        <el-form v-loading="clearAllDataFormBlocking" element-loading-text="清除 &hellip;" element-loading-spinner="el-icon-loading">
            <el-form-item>
                <el-button type="danger" @click="clearAllData">清除</el-button>
                <el-button @click="clearAllDataFormVisible = false" class='el-dialog__close'>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    {% endif %}
</div>
{% endblock content %} {% block js %}
<script>
var container = new Vue({
    el: "#content",
    data: function() {
        return {
            currentPage: 1,
            gamesetCount: 0,
            gamesets: [],
            clearAllDataFormVisible: false,
            clearAllDataFormBlocking: false
        }
    },
    methods: {
        onSortChanged: function(args) {
            console.log(args);
        },
        onTableRowClick: function(row, event, column) {
            console.log(row);
            location.href = "/" + row.id;
        },
        onCurrentPageChanged: function(currentPage) {
            this.refreshGameSets();
        },
        refreshGameSets: function() {
            this.$http.get('/api/gameset/', {
                params: {
                    page: this.currentPage - 1,
                }
            }).then((res) => {
                this.gamesets = res.data.gamesets;
                for (var i = 0; i < this.gamesets.length; i++) {

                    if(this.gamesets[i].envelopeAmount !== 0){
                    this.gamesets[i].envelopeAmount = this.gamesets[i].envelopeAmount / 100 
                    }
                }
                this.gamesetCount = res.data.count;
            });
        },
        clearAllData:function(){
            this.clearAllDataFormBlocking = true;
            this.$http.post('/api/clear').then((res) => {
                this.$notify({
                    title: "清除所有数据成功",
                    message: "清除所有数据成功",
                    type: "success"
                });
                setTimeout(() => location.reload(), 500);
            }).catch((err) => {
                this.$notify.error({
                    title: "清除数据失败",
                    message: err.response.data.error
                });
                this.clearAllDataFormBlocking = false;
                this.clearAllDataFormVisible = false;
            });
        }
    },
    created: function() {
        this.refreshGameSets();
    }
});
</script>
{% endblock js %}
